<template>
  <div class="deparment-setting">
    <el-form>
        <el-form-item style="margin-bottom: 20px;" >
            <el-button type="primary" size="small" style="float: right;" @click="addDepartment" >新增部门</el-button>
        </el-form-item>
        <el-form-item>
            <el-tree 
            :data="deparment" 
            :props="defaultProps" 
            :render-content="renderContent"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
        </el-tree>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { deleteDept } from '../../../public/js/setting'
export default {
  name: 'DepartmentSetting',
  data () {
    return {
      ruleForm: {
        name: 'h'
      },
      id: null,
      deparment: [],
      defaultProps: {
        children: 'adminDepartments',
        label: 'department'
      }
    }
  },
  created () {
    window.commo.showMenu(this)
  },
  mounted () {
    window.bus.$on('departMentBackData', res => {
      this.deparment = res
    })
  },
  methods: {
    information (title, type, nameValue, id) {
      let sendContent = {
        title: title,
        type: type,
        nameValue: nameValue,
        id: id
      }
      window.bus.$emit('showPopover', sendContent)
    },
    addDepartment () {
      this.information('新增部门', 'addSubsector')
    },
    addSubsector (data) {
      this.information('新增子部门', 'addChildSubsector', '', data.id)
    },
    edit (node, data) {
      this.information('编辑部门', 'editSubsector', data.department, data.id)
    },
    remove (node, data) {
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let datas = {
          'timestamp': 0,
          'version': 'string',
          'operation': 'string',
          'id': data.id
        }
        console.log(data.id)
        deleteDept(datas).then(res => {
          if (res.data.errCode === 0) {
            this.$message.success('部门删除成功')
            this.showPopover = false
            this.deparment = res.data.adminDepartments
          }
        })
      }).catch(() => {
      })
    },
    renderContent (h, {node, data, store}) {
      return (
        <span class="node-tyle">
            <span>
                <span>{node.data.department}</span>
            </span>
            <span>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.addSubsector(data) }>添加子部门</el-button>
                <el-button style="font-size: 12px;" type="text" on-click={ () => this.edit(node, data) }>修改</el-button>
                <el-button v-show={node.level !== 1 } style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
            </span>
        </span>
      )
    }
  }
}
</script>
<style lang="scss">
   .deparment-setting {
        position: relative;
      .el-tree-node__content{
        height: 50px;
        border-bottom: 1px solid #edf0f9;
        border-top: 1px solid #edf0f9;
      }
    }
    .node-tyle {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content:
        space-between;
        font-size: 12px;
        padding-right: 8px;
        color: #415161;
      .el-button--text{
        color: #415161;
      }
    }
  .node-tyle:hover{
    background-color: #f5f7fc;
  }
</style>
